<template>
  <!-- 使用el-upload组件实现头像上传功能 -->
  <el-upload
    class="avatar-uploader"
    :action="UploadUrl"
    :headers="{
      Authorization,
    }"
    name="multipartFile"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    accept=".png, .jpg"
  >
    <!-- 如果有预览URL，则显示图片 -->
    <el-image
      v-if="preview_url"
      :src="preview_url"
      class="avatar"
      :class="{ avatar2: mini }"
    >
    </el-image>
    <!-- 否则显示上传图标 -->
    <el-icon
      v-else
      class="avatar-uploader-icon"
      :class="{ 'avatar-uploader-icon2': mini }"
    >
      <Plus />
    </el-icon>
  </el-upload>
</template>

<script  setup>
import { ref, computed } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 从本地存储获取授权Token
const Authorization = localStorage.getItem("token")
  ? localStorage.getItem("token")
  : "";

// 上传接口的URL
const UploadUrl = "/api/uploadFile";

// 定义props，用于接收父组件传递的值
const props = defineProps({
  modelValue: String,
  size: Number,
  mini: Boolean,
});

// 定义emits，用于触发更新事件
const emit = defineEmits(["update:modelValue"]);
// 图片URL的响应式引用
const imageUrl = ref("");
// 计算属性，用于生成预览URL

const preview_url = computed(() => {
  let url = null;
  if (imageUrl.value && imageUrl.value.indexOf("/res") == 0) {
    url = imageUrl.value;
  }
  if (props.modelValue && props.modelValue.indexOf("/res") == 0) {
    url = import.meta.env.VITE_APP_HOST + props.modelValue;
  }
  return url;
});
// 上传成功后的处理函数
const handleAvatarSuccess = (response, uploadFile) => {
  let res = response;
  if (!res.success) {
    ElMessage.error(res.message);
  } else {
    emit("update:modelValue", res.entity.fileUrl);
  }
};
// 上传前的校验函数
const beforeAvatarUpload = (rawFile) => {
  const type_arr = ["image/jpeg", "image/png"];
  if (!type_arr.includes(rawFile.type)) {
    ElMessage.error("文件格式不正确!");
    return false;
  }
  const size = props.size ?? 5;
  if (rawFile.size / 1024 / 1024 > size) {
    ElMessage.error("上传大小不得超过 " + size + "M");
    return false;
  }
  return true;
};
</script>

<style lang="scss" scoped>
/* 设置上传区域的样式 */
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 迷你模式下的头像样式 */
.avatar-uploader .avatar2 {
  width: 120px;
  height: 120px;
  display: block;
}

/* 设置上传区域的样式，包括边框、圆角、光标、位置、溢出隐藏和过渡效果 */
.avatar-uploader :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

/* 鼠标悬停时的样式，改变边框颜色 */
.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

/* 设置上传图标的样式 */
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

/* 迷你模式下的上传图标样式 */
.el-icon.avatar-uploader-icon2 {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>